<html>
<head>
    <meta charset="utf-8">
    <#assign base=request.contextPath  />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css" media="all">
    <script src="${base}/frame/layui/layui.all.js" charset="utf-8"></script>
    <script src="${base}/backstage/js/jquery.min.js"></script>
    <script src="${base}/backstage/js/feng.js"></script>
    <script type="text/javascript" src="${base}/frame/echarts/echarts.min.js"></script>
</head>
<div id="main" style="width: 100%;height:400px;float: left"></div>
<div id="main1" style="width: 100%;height:400px;float: left"></div>
</body>
<script>
    $(function () {
       var option = {
           title: {
               text: '年度订单',
               padding:[
                   20,100,
               ]
           },
           toolbox: {
               show: true,
               orient: 'vertical',
               left: 'right',
               top: 'center',
               feature: {
                   mark: {show: true},//视图
                   magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},//柱状图
                   restore: {show: true},//还原
                   saveAsImage: {show: true}//下载
               }
           },
           color: ['#3398DB'],
           tooltip: {
               trigger: 'axis',
               axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                   type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
               }
           },
           grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           xAxis: [
               {
                   type: 'category',
                   data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10','2020-11', '2020-12'],
                   axisTick: {
                       alignWithLabel: true
                   }
               }
           ],
           yAxis: [
               {
                   type: 'value'
               }
           ],
           series: [
               {
                   name: '成交金额',
                   type: 'bar',
                   barWidth: '60%',
                   data: [10, 52, 200, 334, 390, 330, 220, 410, 20, 300, 620, 20]
               }
           ]
       };
        // 基于准备好的dom，初始化echarts实例
        var myChart4 = echarts.init(document.getElementById('main'));
        // 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option);



        var option = {
            title: {
                text: '菜品销售',
                padding:[
                    20,100,
                ]
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},//视图
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},//柱状图
                    restore: {show: true},//还原
                    saveAsImage: {show: true}//下载
                }
            },
            color: ['#CC00FF'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['红烧茄子', '酸辣白菜', '红烧鱼', '小酥肉', '大盘鸡', '干锅千叶豆腐', '干锅茄子', '红烧肉','红烧排骨','可乐鸡翅','糖醋排骨','水煮鱼','鱼香肉丝','水煮肉片','口水鸡'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    barWidth: '60%',
                    data: [1000, 600, 500, 400, 200, 50, 20,100,50,60,80,400,560,510,220]
                }
            ]
        };
        // 基于准备好的dom，初始化echarts实例
        var myChart4 = echarts.init(document.getElementById('main1'));
        // 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option);
    })
</script>
</html>


